<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/mvc">
    <head>
        <meta charset="utf-8">
        <title>layui</title>
        <link rel="stylesheet" type="text/css" th:href="@{../lib/zTree_v3/css/metroStyle/metroStyle.css}">
        <link rel="stylesheet" type="text/css" th:href="@{../lib/layui/css/layui.css}">
        <script th:src="@{../lib/layui/layui.js}"></script>
        <script th:src="@{../lib/zTree_v3/js/jquery-1.4.4.min.js}"></script>
        <script th:src="@{../lib/zTree_v3/js/jquery.ztree.all.js}"></script>
        <style>
            div::-webkit-scrollbar {
                width: 5px;
                height: 5px;
                background-color: #f5f5f5;
            }

            /*定义滚动条的轨道，内阴影及圆角*/
            div::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
                border-radius: 10px;
                background-color: #f5f5f5;
            }

            /*定义滑块，内阴影及圆角*/
            div::-webkit-scrollbar-thumb {
                /*width: 10px;*/
                height: 20px;
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
                background-color: #555;
            }
            .tree-content {
                display: block;
                position: absolute;
                height: 99%;
                width: 99%;
                left: 0 !important;
                top: 0px !important;
                background: #ffffff;
                border: 1px solid #C9C9C9;
                overflow-y: auto;
            }
        </style>
    </head>
    <body style="overflow: hidden;">
        <div id="demo" class="layui-form-select select-tree"></div>
        <script>
            var zNodes = [];
            $.ajax({
                url : "tree",
                dataType : "json",
                method : "get",
                async : false,
                success : function (data) {
                    zNodes = data;
                }
            });
            // var zNodes = [
            //     {id: 1, pId: 0, name: "北京"},
            //     {id: 2, pId: 0, name: "天津"},
            //     {id: 3, pId: 0, name: "上海"},
            //     {id: 6, pId: 0, name: "重庆"},
            //     {id: 4, pId: 0, name: "河北省", open: true, "chkDisabled": true},
            //     {id: 41, pId: 4, name: "石家庄"},
            //     {id: 42, pId: 4, name: "保定"},
            //     {id: 43, pId: 4, name: "邯郸"},
            //     {id: 44, pId: 4, name: "承德"},
            //     {id: 5, pId: 0, name: "广东省"},
            //     {id: 51, pId: 5, name: "广州"},
            //     {id: 52, pId: 5, name: "深圳"},
            //     {id: 53, pId: 5, name: "东莞"},
            //     {id: 54, pId: 5, name: "佛山"},
            //     {id: 6, pId: 0, name: "福建省"},
            //     {id: 61, pId: 6, name: "福州"},
            //     {id: 62, pId: 6, name: "厦门"},
            //     {id: 63, pId: 6, name: "泉州"},
            //     {id: 64, pId: 6, name: "三明"}
            // ];

            function initSelectTree(id, isMultiple) {
                var setting = {
                    view: {
                        dblClickExpand: false,
                        showLine: false
                    },
                    data: {
                        simpleData: {
                            enable: true
                        },
                        key : {
                            url : "javascript:void();"
                        }
                    },
                    check: {
                        enable: true,
                        chkStyle : 'radio',
                        radioType : "all"
                    },
                    callback : {
                        onCheck : function (event, treeId, treeNode) {
                            if(parent.menuAddParentAgency != undefined && parent.menuAddParentAgency != null){
                                parent.menuAddParentAgency(treeNode);
                            }
                        }
                    }
                };
                if (isMultiple) {
                    setting.check.enable = isMultiple;
                }

                $("#" + id).parent().append('<div class="tree-content scrollbar">' +
                    '<input hidden id="' + id + 'Hide" ' +
                    'name="' + $(".select-tree").attr("id") + '">' +
                    '<ul id="' + id + 'Tree" class="ztree scrollbar" style="margin-top:0;"></ul>' +
                    '</div>');
                $.fn.zTree.init($("#" + id + "Tree"), setting, zNodes);
            }


            $(document).ready(function () {
                initSelectTree("demo", true)
            });
        </script>
    </body>
</html>